<template>
  <a-layout class="competition-box">
    <a-layout-header :style="{backgroundColor : token.colorBgContainer}"  class="header">
      <div class="logo">
        <div @click="() => { webConfig.isDarkColor^=1 }">
          <svg-icon v-if="webConfig.isDarkColor" name="moon"/>
          <svg-icon v-else name="sun"/>
        </div>
        <img src="../../../../public/favicon.ico">
      </div>
      <div style="flex: 1;overflow: auto">
        <a-menu
            @click="({item, key, keyPath})=>{$router.push(key + '/' + contestId)}"
            v-model:selectedKeys="current"
            mode="horizontal"
            :items="items"
        >
        </a-menu>
      </div>
      <div class="userInfo">
        <svg-icon style="margin-right: 5px" name="user"/>
        <span>{{user.userInfo?.userName}}</span>
      </div>
    </a-layout-header>
    <a-layout  :class="['content',{'openSide' : showSide}]">
      <div class="left-main">
        <div class="left-side">
          <a-menu
              @click="({item, key, keyPath})=>{$router.push('/contestIn/problem/' + contestId + '/' + key)}"
              width="220"
              collapsedWidth="80"
              style="min-height: 100%"
              v-model:openKeys="state.openKeys"
              v-model:selectedKeys="state.selectedKeys"
              mode="inline"
              theme="light"
              :inline-collapsed="!showSide"
              :items="sideItems"
          />
        </div>
        <div  @click="toShowSide" class="icon">
          <LeftCircleTwoTone v-if="showSide"  />
          <RightCircleTwoTone v-else   />
        </div>
      </div>
      <a-layout-content class="right-main" >
        <router-view v-slot="{ Component }">
          <component :key="$route.name"  :is="Component" />
        </router-view>
      </a-layout-content>
    </a-layout>

  </a-layout>



</template>

<script setup lang="ts">

import {getContestInfo, getProblemList} from "@/api/contest"
import {
  AppstoreOutlined,
  CloseOutlined,
  CheckOutlined,
  HourglassTwoTone,
  LeftCircleTwoTone,
  MailOutlined,
  RightCircleTwoTone,
  SettingOutlined
} from '@ant-design/icons-vue';
const showSide = ref<boolean>(true)
import SvgIcon from "@/components/SvgIcon/index.vue";
import useStore from "@/store";
const {webConfig, user} = useStore()
//风格
import {MenuProps, theme} from 'ant-design-vue';
import {h, ref} from "vue";
const {useToken} = theme;
const {token} = useToken();
const contestInfo = ref()
const contestId = ref()
const loading  = ref<boolean>(true)
onMounted(async () => {
  contestId.value = useRoute().params.contestId;
  loading.value = true;
  await initContestInfo();
  loading.value = false;
})

const initContestInfo = async () => {
  contestInfo.value =  (await getContestInfo(contestId.value)).data;

  if(contestInfo.value.type == 0){
    //ACM
    const ACMTopItem = (<MenuProps['items']>[
      {
        key: `/contestIn/problemList`,
        icon: () => h(MailOutlined),
        label: '题目列表',
        title: '题目列表',
      },
      {
        key: '/contestIn/submitList',
        icon: () => h(AppstoreOutlined),
        label: '提交列表',
        title: '提交列表',
      },
      {
        key: '/contestIn/ACMRanking',
        icon: () => h(AppstoreOutlined),
        label: '排行',
        title: '排行',
      },
    ])
    items.value =  ACMTopItem
  }else {
    //ACM
    const IOTopItem = (<MenuProps['items']>[
      {
        key: `/contestIn/problemList`,
        icon: () => h(MailOutlined),
        label: '题目列表',
        title: '题目列表',
      },
      {
        key: '/contestIn/submitList',
        icon: () => h(AppstoreOutlined),
        label: '提交列表',
        title: '提交列表',
      },
      {
        key: '/contestIn/OIRanking',
        icon: () => h(AppstoreOutlined),
        label: '排行',
        title: '排行',
      },
    ])
    items.value = IOTopItem
  }
  sideItems.value = []
  contestInfo.value.problems.forEach(item => {
    const sideItem = {
      key: item.pid,
      icon: getIcon(item),
      label: h("span",{
        style:{
          fontSize: '12px'
        }
      },[
        item.title
      ]),
      title: h("span",{
        style:{
          fontSize: '12px'
        }
      },item.title)
    } as MenuProps
    sideItems.value.push(sideItem)
  })

}

const getIcon = (item) => {
  if(item.submitStatus == 1)
    return h(CloseOutlined,{
      style:{
        fontSize: '12px',
        color:'red'
      }
    })
  else if(item.submitStatus == 2)
    return h(CheckOutlined,{
      style:{
        fontSize: '12px',
        color:'blue'
      }
    })
  return  h("span",{
    style:{
      fontSize: '12px'
    }
  },item.seq)

}
//顶部导航栏
const current = ref<string[]>(['/contestIn/problemList']);

const items = ref<MenuProps['items']>(<MenuProps['items']>[
  {
    key: `/contestIn/problemList`,
    icon: () => h(MailOutlined),
    label: '题目列表',
    title: '题目列表',
  },
  {
    key: '/contestIn/submitList',
    icon: () => h(AppstoreOutlined),
    label: '提交列表',
    title: '提交列表',
  },
]);

//侧边栏
const toShowSide = () => {
  showSide.value = !showSide.value
}

const sideItems = ref<MenuProps['items']>(<MenuProps['items']>[])
const state = reactive({
  collapsed: false,
  selectedKeys: ['1'],
  openKeys: ['sub1'],
  preOpenKeys: ['sub1'],
});

</script>

<style lang="scss" scoped>
@import 'src/assets/base.scss';

$sider-width : 220px;
$sider-width-hide : 80px;
$top-width : 64px;

.competition-box{
  width: 100%;
  .header{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    .logo {


      height: 100%;
      float: left;
      display: flex;
      align-items: center;
      img{
        width: 80px;
        margin: 10px 0;
        height: calc(100% - 20px);
      }

      cursor: pointer;
    }

  }
  .content{
    position: relative;
    top: $top-width;
    min-height: calc(100vh - #{$top-width});
    .left-main{
      position: fixed;
      left: 0;
      width: $sider-width-hide;
      top: $top-width;
      bottom: 0;
      transition: left .3s;
      //overflow-x: scroll;
      z-index: 20;
      .left-header{
        display: flex;
        align-items: center;
        height: 50px;
      }
      .left-side{
        overflow-x: hidden;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        @include scroll-buty;
      }
      .icon{
        position: absolute;
        right: 0px;
        transform: translate(50%,50%);
        top: 50%;
        z-index: 21;
        font-size: 30px;
        cursor: pointer;
      }

    }
    .right-main{
      margin-top: 10px;
      //background-color: magenta;
      margin-left: $sider-width-hide;
      height: 100%;
      width: calc(100% - #{sider-width-hide});
      transition: margin-left .3s;
    }

  }


}

.openSide{

  .left-main{
    width: $sider-width !important;
  }

  @media screen and (min-width: 768px){

    .right-main{
      margin-left: $sider-width !important;
      width: calc(100% - #{$sider-width}) !important;
    }
  }
  //
  //@media screen and (max-width: 767px){
  //  .left-main{
  //    left: 0 !important;
  //    box-shadow: 5px 0 5px rgba(0, 0, 0, 0.5);
  //  }
  //  .right-main{
  //  }
  //}

}

.size12{
  font-size: 12px !important;
}

</style>
